<template>
  <el-container style="height: 100%">
    <el-header class="work-header">
      <el-row style="margin-top: 5px;">
        <el-col :span="22">
          <el-image style="height: 40px" src="/public/images/logo.png"/>
        </el-col>
        <el-col :span="2" style="text-align: right">
            <el-dropdown>
              <el-avatar src="/public/images/avatar.png" />
              {{userinfo.nickname}}
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleChangePwd">修改密码</el-dropdown-item>
                  <el-dropdown-item  @click="handleLogout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu style="width: 100%;height: 100%"
                 :default-active="activeMenu"
                 class="el-menu-vertical-demo"
                 @select="handleSelect">
          <template v-for="(crumb, index) in routes2" :key="index">
            <template v-if="!crumb.hidden">
              <el-sub-menu v-if="crumb.children" :index="crumb.id">
                <template #title>
                  <component class="icon" :is="crumb.icon"></component>
                  <span>{{crumb.name}}</span>
                </template>
                <el-menu-item v-for="(subItem, subindex) in crumb.children" :index="subItem.id">
                  <component class="icon" :is="subItem.icon"></component>
                  <span>{{subItem.name}}</span>
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item v-else :index="crumb.id">
                <component class="icon" :is="crumb.icon"></component>
                <span>{{crumb.name}}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-aside>
      <el-main style="display: flex;flex-direction: column;">
        <breadcrumb></breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  <dwin ref="userinfoDialog" :width="600" :url="'/view/sys-user/changePwd.vue'" :title="'修改密码'"></dwin>
</template>
<script>
import Dwin from "../component/dwin.vue";
import {loginUser} from '/http/sys-user.js'
import {logout} from '/http/auth.js'
export default {
  components: {Dwin},
  setup() {
    const routes2 = routes[routes.length-1].children;
    const routes2Path = {};
    const userinfoDialog = ref(null)
    const userinfo = ref({})
    routes2.forEach((item1,key1)=>{
      item1.id = key1+"";
      routes2Path[item1.id] = item1.path;
      if(item1.children&&item1.children.length>0){
        item1.children.forEach((item2,key2)=>{
          item2.id = key1+"-"+key2;
          routes2Path[item2.id] = item2.path;
        })
      }
    });
    const handleSelect = (index, indexPath) => {
      router.push(routes2Path[index])
    }
    const activeMenu = ref(0)
    watch(() => router.currentRoute.value, (newValue, oldValue) => {
      const index = routes2.findIndex((item) => {
        return item.path == newValue.path
      })
      activeMenu.value = index;
    });

    const handleChangePwd = ()=>{
      userinfoDialog.value.open();
    }

    const handleLogout = ()=>{
      logout().then(res=>{
        window.location.reload()
      })
    }
    onMounted(()=>{
      // if(activeMenu.value===0){
      //   router.push(routes2Path[0])
      // }
      loginUser().then(res=>{
        if(res.data.code===200){
          userinfo.value = res.data.data
        }else{
          ElMessage.error("当前未登录")
        }
      })
    })
    console.log(routes)
    return {routes2, handleSelect, activeMenu,handleChangePwd,userinfo,userinfoDialog,handleLogout}
  }
}
</script>
<style>
html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}

.work-header{
  height:75px;
}
.page-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 0px 20px;
}
.el-pagination {
  margin: auto auto 10px auto;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 160px;
  min-height: 400px;
}
.icon{
  width:18px;
  height: 18px;
  margin-right: 5px;
}

.el-breadcrumb {
  font-size: 16px;
  border-top: #f0f0f0 solid 1px;
  background-color: #fafafa;
  padding: 10px 0 10px 10px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.el-breadcrumb__item {
  color: #409EFF;
}

.el-breadcrumb__separator {
  color: #606266;
}
.el-main {
  padding: 0px !important;
}
html.dark .svg-icon,
html.dark svg {
  fill: var(--el-text-color-regular);
}
</style>